<template>
  <div class="no-permission">
    <h3>权限不足或没有该页面</h3>
    <h3 v-if="countDown > 0">将在 {{ countDown }} 秒后自动跳转到首页...</h3>
    <el-button type="primary" @click="navigateTo('layout')">立即跳转</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const countDown = ref(3)
let timer: number | null = null

// 跳转方法
const navigateTo = (routeName: string) => {
  router.push({ name: routeName })
}

// 倒计时跳转
const startCountDown = () => {
  timer = window.setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) {
      clearTimer()
      navigateTo('layout')
    }
  }, 1000)
}

// 清除定时器
const clearTimer = () => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
}

// 组件挂载时启动倒计时
onMounted(() => {
  startCountDown()
})

// 组件卸载前清除定时器
onBeforeUnmount(() => {
  clearTimer()
})
</script>

<style lang="scss" scoped>
.no-permission {
  text-align: center;
  margin-top: 100px;
  h3 {
    font-size: 20px;
    margin: 20px 0 30px 0;
  }
}
</style>
